<template>
  <div>
    <!--多个按钮-->
    <el-space wrap>
      <span
        v-for="(item, key) in btnOrder"
        :key="'btn_'+ key"
      >
        <nf-button-service
          v-if="itemMeta[item].btnKind === 'delete'"
          :moduleId="moduleId"
          :dataId="dataId"
          :dataIds="dataIds"
          :active="active"
          :buttonMeta="itemMeta[item]"
          :events="events"
        >
        </nf-button-service>
        <nf-button-dialog
          v-else
          :moduleId="moduleId"
          :dataId="dataId"
          :active="active"
          :buttonMeta="itemMeta[item]"
          :componentKind="componentKind"
        >
        </nf-button-dialog>
      </span>
    </el-space>
  </div>
</template>

<script>
  import { ElSpace } from 'element-plus'
  // 两个按钮组件
  import nfButtonDialog from './button-dialog.vue'
  import nfButtonService from './button-service.vue'
</script>

<script setup>

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String], // 模块ID
  active: Object, // 按钮的meta集合
  dataId: {
    type: [String, Number],
    default: ''
  },
  dataIds: {
    type: [Array],
    default: []
  },
  btnOrder: Array, // 按钮的排序
  itemMeta: Object, // 按钮的meta集合
  events: {
    type: Object,
    default: {
      deleteClick: () => {} // 删除按钮的单击事件，已经确实过的
    }
  },
  componentKind: { // 弹窗打开的组件的字典
    type: Object,
    default: () => {}
  }
})


</script>
